<!DOCTYPE html>
<html>
<head>
    <title>gooreplacer 自定义规则</title>
    <link rel="shortcut icon" href="img/gooreplacer.ico">
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap.min.css" >
    <link rel="stylesheet" href="css/bootstrap-theme.min.css" >
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/options.css">
    <script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/db.js"></script>
    <script type="text/javascript" src="js/options.js"></script>
    <style type="text/css">
      #loadingScreen {
          background: url(img/ajax-loader.gif) no-repeat 5px 8px;
          padding-left: 25px;
      }
      /* hide the close x on the loading screen */
      .loadingScreenWindow .ui-dialog-titlebar-close {
          display: none;
      }
    </style>

</head>
<body class="container">
    <div class="jumbotron">
    <h1><img src="img/48.png"></img>gooreplacer<br/></h1>
    <p>想去哪儿，就去哪儿</p>

    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-4">
            <div class="btn-toolbar">
                <button id="homepage" class="btn btn-default">
                    <span class='glyphicon glyphicon-home'/>主页
                </button>
                <button data-toggle="modal" data-target="#helpModal" class="btn btn-default">
                    <span class='glyphicon glyphicon-question-sign'/>帮助
                </button>
                <div class="btn-group">
                    <button id="import" class="btn btn-default">
                        <span class='glyphicon glyphicon-import'/>导入
                    </button>
                    <button id="export" class="btn btn-default">
                        <span class='glyphicon glyphicon-export'/>导出
                    </button>
                </div>
            </div>
        </div>
        <div class="col-sm-4"></div>
    </div>

    <input type="file" id="gsonChooser" accept=".gson" style="display:none" />
    <a id="gsonExport" style="display:none" download="gooreplacer.gson"></a>
    </div>

        <div class="panel panel-primary">
            <div class="panel-heading lead">在线规则</div>
            <div class="form-horizontal panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label">更新地址</label>
                    <div class="col-sm-10">
                        <div class="input-group">
                            <input class="form-control" type="url" id="onlineURL" spellcheck="false"/>
                            <span class="input-group-btn">
                                <button class="btn btn-warning" type="button" id="openURL"><span class="glyphicon glyphicon-chevron-right"/></button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">更新频率</label>
                    <div class="col-sm-2">
                        <select class="form-control" id="onlineInterval">
                            <option value="0">关闭</option>
                            <option value="60">1 小时</option>
                            <option value="180">3 小时</option>
                            <option value="360">6 小时</option>
                            <option value="720">12 小时</option>
                            <option value="1440">1 天</option>
                        </select>
                    </div>
                    <div class="col-sm-2 checkbox"><label><input id="onlineEnable" type="checkbox"/>启用</label></div>
                    <div class="col-sm-6">
                        <div class="btn-group btn-group-justified">
                            <a class="btn btn-danger" id="reset">
                            <span class="glyphicon glyphicon-repeat"/>重置</a>
                            <a class="btn btn-success" id="onlineSave">
                            <span class="glyphicon glyphicon-floppy-disk"/>保存</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-footer clearfix">
                <label>上次更新时间：<span id="lastUpdateTime"></span></label>
                <button class="btn btn-info pull-right" id="onlineUpdate">
                <span class="glyphicon glyphicon-refresh"/>立即更新</button>
            </div>
        </div>
    <div class="panel panel-info">
        <div class="panel-heading lead clearfix">本地规则
            <button id='removeAll' class="btn btn-danger btn-sm pull-right"><span class="glyphicon glyphicon-remove"/>删除全部</button>
        </div>
        <table id="rules" class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th class="col-sm-4">原始URL</th>
                    <th class="col-sm-2">类型</th>
                    <th class="col-sm-4">目的URL</th>
                    <th class="col-sm-2">操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
        <div class="panel-footer clearfix">
            <button id='add' class="btn btn-success btn-lg col-sm-6 col-md-offset-3"><span class="glyphicon glyphicon-plus"/>添加</button>
        </div>
    </div>
    <!-- 帮助框 -->
    <div id="helpModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h4 class="modal-title">使用帮助</h4>
                </div>
                <div class="modal-body">
                    <ol>
                        <li>每条重定向规则有“开启/停用”两种状态</li>
                        <li>使用“导出”功能，可以把当前的重定向规则导出到本地</li>
                        <li>使用“导入”功能，可以从本地加载重定向规则</li>
                        <li>自定义重定向规则，可以参考 Github 上的<a href="https://github.com/jiacai2050/gooreplacer#usage" target="_blank">使用说明</a>。</li>
                    </ol>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 结束 -->

    <div id="loadingScreen"></div>
</body>
</html>
